<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<h2>align-items:flex-start</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

	<style>
		.box{
			display:-webkit-flex;
			display:flex;
			width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none; list-style-type:none; background-color:#eee;}
	.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
	.box li:nth-child(1){padding:10px;}
	.box li:nth-child(2){padding:15px 10px;}
	.box li:nth-child(3){padding:20px 10px;}
	#box{
		-webkit-align-items:flex-start;
		align-items:flex-start;
	}
	#box2{
		-webkit-align-items:flex-end;
		align-items:flex-end;
	}
	#box3{
		-webkit-align-items:center;
		align-items:center;
	}
	#box4{
		-webkit-align-items:baseline;
		align-items:baseline;
	}
	#box5{
		-webkit-align-items:strecth;
		align-items:strecth;
	}
	</style>

</body>
</html>
